<template>
  <div class="vvvideo">
      <div class="page2" >
          <div class="modal_varify" v-if="doesvarify">
                <slide-verify :l="42"
                    :r="10"
                    :w="410"
                    :h="205"
                    @success="onSuccess"
                    @fail="onFail"
                    ref="slideblock"
                    @refresh="onRefresh"
                    :slider-text="text"
                    style="z-index: 999;width: 410px;position: absolute;left: 50%;margin-left: -205px;top: 50%;margin-top: -133px;background: white;"
                    >
                </slide-verify>
          </div>
        <video
        id="video"
        controls="controls"
        ref="video"
        preload="auto"
        @timeupdate="videoplay"
        @ended="videoend"
        ></video>
      </div>
  </div>
</template>

<script>
import axios from '../../utils/axios'
let Hls = require('hls.js');
export default {
    props:['videou','videooid','doesplay','playTime'],
    data() {
        return {
            curTime:0,
            ttmeeee:null,
            timee:null,
            video:'',
            text: '向右滑动验证继续观看',
            is_over:false,
            doesvarify:false,
            hls: null
        }
    },
    mounted() {
        this.verify()
    },
    beforeDestroy() {
        clearInterval(this.timee)
        this.timee = null
        clearInterval(this.ttmeeee)
        this.ttmeeee = null
    },
    destroyed(){
        axios.post('/trains/create_study_hour/',{video:this.videooid,time:this.curTime,is_over:this.is_over})
    },
    watch:{
        doesplay(newValue,oldValue){
            if(newValue==false){
                this.verify()
            }else{
                clearInterval(this.timee)
                this.timee = null
            }
        },
        playTime(newValue,oldValue){
            if(newValue){
                let video = this.$refs.video
                video.currentTime = newValue
            }
        },
        videou(newValue,oldValue){
            if(newValue){
                // let video = this.$refs.video
                if (Hls.isSupported()) {
                    this.hls = new Hls();
                    this.hls.loadSource(newValue);
                    this.hls.attachMedia(this.$refs.video);

                    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
                        // console.log("加载成功");
                    });
                    this.hls.on(Hls.Events.ERROR, (event, data) => {
                        // console.log(event, data);
                        // 监听出错事件
                        // console.log("加载失败");
                    });
                } else if (this.$refs.video.canPlayType('application/vnd.apple.mpegurl')) {
                    this.$refs.video.src = newValue
                    this.$refs.video.addEventListener('loadedmetadata',function() {
                        this.$refs.video.play();
                    });
                }
            }
        }
    },
    methods:{
        videoplay() {
            if(this.doesplay==false){
                let video = this.$refs.video
                let sym
                if(video.paused==true){
                    clearInterval(this.ttmeeee)
                    this.ttmeeee=null
                }else{
                    this.ttmeeee = setInterval(()=>{
                    this.curTime = video.currentTime
                    if(this.curTime-sym>1){
                        video.currentTime=sym
                    }
                    sym=video.currentTime
                    },500)
                }
            }else{
                clearInterval(this.ttmeeee)
                this.ttmeeee=null
            }
        },
        verify(){
            if(this.doesplay==false){
                this.video = this.$refs.video
                this.timee=setInterval(() => {
                    if(this.doesvarify==false){
                        this.doesvarify = true
                        if(this.doesvarify == true){
                            this.video.pause()
                        }
                    }
                }, 600000);
            }
        },
        onSuccess(){
            this.doesvarify = false
            let video = this.$refs.video
            video.play()
        },
        onFail(){
        },
        videoend(){
            let video = this.$refs.video
            let time = video.duration
            this.is_over = true
            axios.post('/trains/create_study_hour/',{video:this.videooid,time,is_over:this.is_over}).then(res=>{
                
            })
        },
        onRefresh(){
        },
    }
}
</script>

<style lang="less">
.vvvideo{
    video{
        width: 100%;
        height: 490px;
    }
    .page2{
        position: relative;
        .modal_varify{
            position: absolute;
            color: white;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.65)
        }
    }
}
</style>